<template>
    <a-layout class="home-layout">
        <a-affix :offset-top="0">
            <a-layout-header class="home-layout-header">
                <div class="left">
                    <Logo />
                    <a-button type="text">
                        <icon-search class="search-icon" size="20" color="#999" />
                    </a-button>
                </div>
                <div class="center">
                    <HeaderNav :menus="menus" />
                </div>
                <div class="right">
                    <ToolbarNav />
                    <UserNav nowModule="home" />
                </div>
            </a-layout-header>
        </a-affix>
        <a-layout style="padding: 0 24px;">
            <a-layout-content>
                <a-row>
                    <a-col :xs="0" :sm="0" :md="2" :lg="4"></a-col>
                    <a-col :xs="24" :sm="24" :md="20" :lg="16" :xl="16" :xxl="16">

                        <route-page />

                    </a-col>
                    <a-col :xs="0" :sm="0" :md="2" :lg="4"></a-col>
                </a-row>
            </a-layout-content>
            <a-layout-footer>
                <div class="footer">
                    <div class="footer-content">
                        <div class="footer-content-left">
                            备案号：{{ icp }}
                        </div>
                        <div class="footer-content-right">

                        </div>
                    </div>
                </div>
            </a-layout-footer>
        </a-layout>
    </a-layout>
</template>
<script lang="ts" setup>
import RoutePage from './RoutePage.vue';
import { homeMenus as menus } from '@/router/menus';
import HeaderNav from './HeaderNav.vue';
import ToolbarNav from './ToolbarNav.vue';
import UserNav from './UserNav.vue';

const icp = import.meta.env.VITE_APP_ICP
// logger("HomeLayout", "defaultOpenKeys", defaultOpenKeys.value, "selectedKeys", selectedKeys.value)

</script>
<style lang="css" scoped>
.home-layout {
    min-height: 100vh;
    background-color: var(--a-layout-body-background);
}

.home-layout-header {
    height: 64px;
    display: flex;
    flex-direction: row;
    /* align-items: center; */
    justify-content: space-between;

    .left {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-left: 200px;
    }

    .center {
        display: block;
        flex: 1;
        margin: 0 16px;
    }

    .right {
        display: flex;
        align-items: center;
        gap: 16px;
        padding-right: 200px;
    }
}
</style>